<!DOCTYPE html>
<html>
<head>
    <title>待办任务详情</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
    <link rel="stylesheet" href="style/css/weui.css"/>
    <link rel="stylesheet" href="style/css/jquery-weui.css"/>
    <link rel="stylesheet" href="style/css/demos.css"/>
    <link rel="stylesheet" type="text/css" href="style/css/style.css" />
    <link rel="stylesheet" type="text/css" href="style/css/buttons.css">
    <link rel="stylesheet" type="text/css" href="style/css/ystep.css">
</head>
<body ontouchstart>
<div class="indexhead">
    <div class="content" style="width:100%;color:#fff;float:left;margin-right:-105px">
        <div id="content_inner" style="font-size:18px;height:43px;padding-left: 10px;">请购单</div>
    </div>
    <div class="container" style="width:105px;color:#fff;">
        <section class="main">
            <div class="wrapper-demo">
                <div id="dd" class="wrapper-dropdown-5" tabindex="1">辅助查询
                    <ul class="dropdown">
                        <li><a href="dbspqk.html"><i class="icon-cog"></i>审批情况</a></li>
                        <li id="fjgl"><a><i class="icon-cog"></i>附件管理</a></li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
</div>
<div class="bd">
    <div class="weui-cells__title">主信息</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>单据编号：</p>
            </div>
            <div class="weui-cell__ft">QGD20170303001</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>单据类型：</p>
            </div>
            <div class="weui-cell__ft">普通请购单</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>业务单元：</p>
            </div>
            <div class="weui-cell__ft">北京分公司</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>采购部门:</p>
            </div>
            <div class="weui-cell__ft">市场部</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>采购人:</p>
            </div>
            <div class="weui-cell__ft">张思文</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>采购状态:</p>
            </div>
            <div class="weui-cell__ft">已提交</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>制单人:</p>
            </div>
            <div class="weui-cell__ft">张思文</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>制单时间:</p>
            </div>
            <div class="weui-cell__ft">2017-03-03 12:35:30</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>最后修改人:</p>
            </div>
            <div class="weui-cell__ft">张思文</div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>最后修改时间:</p>
            </div>
            <div class="weui-cell__ft">2017-03-03 12:35:30</div>
        </div>
    </div >
<!--
<div style="    width: 100%;    /*height: 100px;!*    border: 5px solid red;*!overflow-x: scroll;overflow-y: hidden*/">
-->
    <div class="ystep4" style="overflow-x: scroll;padding-top: 20px;padding-left:10px"></div>
<!--
</div>
-->
  <div class="weui-cells__title">子信息</div>
    <div class="weui-cells">
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>物料名称：电脑</p>
            </div>
            <div class="weui-cell__ft" id="xxid1">详细</div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>物料名称：电脑</p>
            </div>
            <div class="weui-cell__ft">详细</div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>物料名称：电脑</p>
            </div>
            <div class="weui-cell__ft">详细</div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>物料名称：打印机</p>
            </div>
            <div class="weui-cell__ft">详细</div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>物料名称：打印机</p>
            </div>
            <div class="weui-cell__ft">详细</div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>物料名称：打印机</p>
            </div>
            <div class="weui-cell__ft">详细</div>
        </a>
    </div>

</div>
<div class="weui-footer weui-footer_fixed-bottom" style="background: beige">

    <span class="button-wrap">
    <a id="agree" class="button button-pill button-raised button-primary">同意</a>
  </span>
    <span class="button-wrap">
    <a id="disagree" class="button button-pill ">不同意</a>
  </span>
</div>
<script src="style/js/jquery-2.1.4.js"></script>
<!-- 引入ystep插件 -->
<script type="text/javascript" src="style/js/ystep.js"></script>
<script src="style/js/fastclick.js"></script>
<script src="dist/layer-v3.0.3/layer/layer.js"></script>

<script>
    $(function() {
        FastClick.attach(document.body);
    });
    function DropDown(el) {
        this.dd = el;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this;

            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                event.stopPropagation();
            });
        }
    }

    $(function() {

        var dd = new DropDown( $('#dd') );

        $(document).click(function() {
            // all dropdowns
            $('.wrapper-dropdown-5').removeClass('active');
        });

    });
    $('#agree').on('click',function () {
            layer.prompt({title: '请输入审批意见！', formType: 2}, function(text, index){
                layer.close(index);
                layer.msg('审批完毕！您最后写下了：'+text);
        });
    })
    $('#disagree').on('click',function () {
        layer.prompt({title: '请输入审批意见！', formType: 2}, function(text, index){
            layer.close(index);
            layer.msg('审批完毕！您最后写下了：'+text);
        });
    })

    $('#fjgl').on('click', function(){
        layer.open({
            title: '附件管理',
            content:'<div class="weui-cells">'+
            '<div class="weui-cell">'+
            '<div class="weui-cell__bd">'+
            '<p><a href="file/接口说明.docx" download="w3logo">普通请购单附件.doc</a></p>'+
            '</div>'+
            '</div>'+
            '</div>'
        })
    });
    $('#xxid1').on('click', function(){
        layer.open({
            title: '请购单明细'
            ,content: '<div class="container1" id="container">'+
            '<div class="weui-cells">'+
                '<div class="weui-cell">'+
                '<div class="weui-cell__bd">'+
                '<p>物料编号：</p>'+
                '</div>'+
                '<div class="weui-cell__ft">200101</div>'+
                '</div>'+
                ' <div class="weui-cell">'+
                '<div class="weui-cell__bd">'+
                '<p>物料名称：</p>'+
                '</div>'+
                '<div class="weui-cell__ft">电脑</div>'+
                '</div>'+
                '<div class="weui-cell">'+
                '<div class="weui-cell__bd">'+
                '<p>采购数量：</p>'+
                '</div>'+
                '<div class="weui-cell__ft">100台</div>'+
                '</div>'+
                '<div class="weui-cell">'+
                ' <div class="weui-cell__bd">'+
                ' <p>采购价格:</p>'+
                ' </div>'+
                '<div class="weui-cell__ft">4000元</div>'+
                ' </div>'+
                ' </div>'+
                    '</div>'
        }); });
    //根据jQuery选择器找到需要加载ystep的容器
    //loadStep 方法可以初始化ystep
    $(".ystep4").loadStep({
        size: "large",
        color: "blue",
        steps: [{
            title: "提交",
            content: "张三（2017-03-02 12:23:41）"
        },{
            title: "审核",
            content: "李四（2017-03-03 12:23:41）"
        },{
            title: "审核",
            content: "刘德华"
        }]
    });
    $(".ystep4").setStep(2);
</script>
<script src="style/js/jquery-weui.js"></script>
</body>
</html>